<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<!-- 商品网格片段 -->
<div class="grid-3" style="width: 100%" th:fragment="prodList">
    <div class="card" style="width: 18rem;" th:each="product:${products}">
         <!-- 使用PageInfo获取数据要使用：传参.list 如：xxx.list,products.list,取 PageInfo 内部的list -->
        <img th:src="${product.imageUrl}" class="card-img-top productImg"
             th:alt="${product.name}" style="height: 270px;overflow: hidden">
        <div class="card-body">
            <h3 class="card-title" th:text="${product.name}"></h3>
            <p th:text="${product.description}"></p>
            <span th:text="${product.price}" style="color:red;font-size: 26px;"></span>&nbsp;|
            <span th:text="${product.stock}" style="color:gray;font-size: 14px;"></span>
        </div>
    </div>

    <!-- 有数据才出现分页控件 -->
    <nav th:if="${page != null and page.total > 0}" class="w-100 mt-3">
        <div class="d-flex justify-content-center align-items-center gap-1">
            <!-- 上一页 -->
            <button class="btn btn-sm btn-outline-secondary ajax-page"
                    th:data-page="${page.prePage}" th:data-size="${page.pageSize}"
                    th:disabled="${!page.hasPreviousPage}">上一页</button>

            <!-- 数字页码 -->
            <button th:each="num : ${#numbers.sequence(1, page.pages)}"
                    class="btn btn-sm btn-outline-primary ajax-page"
                    th:data-page="${num}" th:data-size="${page.pageSize}"
                    th:classappend="${num == page.pageNum ? 'active' : ''}"
                    th:text="${num}">1</button>

            <!-- 下一页 -->
            <button class="btn btn-sm btn-outline-secondary ajax-page"
                    th:data-page="${page.nextPage}" th:data-size="${page.pageSize}"
                    th:disabled="${!page.hasNextPage}">下一页</button>
        </div>

        <!-- 分页信息 -->
        <div class="text-center mt-2 text-muted">
            显示第 <span th:text="${page.startRow}">1</span>-<span th:text="${page.endRow}">10</span> 条，
            共 <span th:text="${page.total}">0</span> 条记录，共 <span th:text="${page.pages}">0</span> 页
        </div>
    </nav>
    <!-- 无数据提示 -->
    <div th:if="${page == null or page.total == 0}" class="text-center"
         style="background-color: #e8f4fd;height: 30px;width: 100px;line-height: 30px;">
        暂无数据
    </div>
</div>
</body>
</html>